<template>
  <div id="EquipmentTrain">
    <div class="outermostBgHead"></div>
    <div class="outermostBgBox">
      <div
        class="box"
        :style="{
          backgroundImage: `url(${require('@/assets/img/EquimentIcon2.png')})`,
        }"
        :class="{ activedStyle: actived == 'PrincipleTeach' }"
        @click="changeActived('PrincipleTeach')"
      >
        <div>原理示教</div>
      </div>
      <div
        class="box"
        :style="{
          backgroundImage: `url(${require('@/assets/img/EquimentIcon3.png')})`,
        }"
        :class="{ activedStyle: actived == 'EquipmentMain' }"
        @click="changeActived('EquipmentMain')"
      >
        <div>装备维护训练</div>
      </div>
      <div
        class="box"
        :style="{
          backgroundImage: `url(${require('@/assets/img/EquimentIcon1.png')})`,
        }"
        :class="{ activedStyle: actived == 'SoundEq' }"
        @click="changeActived('SoundEq')"
      >
        <div>声隐身装备的综合管理</div>
      </div>
      <div
        class="box"
        :style="{
          backgroundImage: `url(${require('@/assets/img/EquimentIcon4.png')})`,
        }"
        :class="{ activedStyle: actived == 'OnlineTheory' }"
        @click="changeActived('OnlineTheory')"
      >
        <div>在线理论考核</div>
      </div>
    </div>
    <PrincipleTeach ref="PrincipleTeach" v-if="actived == 'PrincipleTeach'" />
    <div class="OnlineTheory" v-if="actived == 'OnlineTheory'">
      <a-select
        default-value="lucy"
        style="width: 200px"
        placeholder="选择课程"
      >
        <a-select-option value="jack"> Jack </a-select-option>
        <a-select-option value="lucy"> Lucy </a-select-option>
      </a-select>
      <a-button type="primary">开始考核</a-button>
    </div>
  </div>
</template>
  
<script>
import PrincipleTeach from "@/pages/index/views/EquipmentTrain/PrincipleTeach.vue"; //原理示教
export default {
  components: {
    PrincipleTeach, //原理示教
  },
  data() {
    return {
      actived: "",
    };
  },
  watch: {
    actived: {
      handler(newVal) {
        if (newVal == "PrincipleTeach") {
          //原理示教
          this.$router.push("/PrincipleTeach");
        }
        if (newVal == "EquipmentMain") {
          //装备维护训练
          this.$router.push("/EquipmentMain");
        }
        if (newVal == "SoundEq") {
          //声隐身装备的综合管理
          this.$router.push("/SoundEq");
        }
        if (newVal == "OnlineTheory") {
          //在线理论考核
          this.$router.push("/OnlineTheory");
        }
      },
    },
  },
  methods: {
    changeActived(val) {
      //切换tabs
      this.actived = val;
    },
  },
};
</script>
  
<style lang="scss" scoped>
#EquipmentTrain {
  height: 100vh;
  background: url("~@/assets/img/bg.png");
  background-size: 100% 100%;
  padding-top: 30px;
  .outermostBgHead {
    width: 1500px;
    height: 70px;
    margin: 0 auto;
    background: url("~@/assets/img/loginTitle.png") no-repeat 100%;
  }
  .outermostBgBox {
    display: flex;
    margin-top: 15%;
    justify-content: space-around;
    font-size: 34px;
    color: white;
    .box {
      width: 400px;
      height: 200px;
      padding-top: 148px;
      cursor: pointer;
      padding-left: 20px;
      background-size: 100% 100%;
      text-align: center;
    }
  }
  .activedStyle {
    // color: #bbddff;
  }
  .OnlineTheory {
    width: 100%;
    margin-top: 10%;
    display: flex;
    justify-content: center;
  }
}
</style>